.layout-container {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 4px;
  
  // 基础布局类型
  &.layout-absolute {
    position: relative;
  }
  
  &.layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-template-rows: var(--grid-rows);
    grid-auto-flow: var(--grid-auto-flow, row);
  }
  
  &.layout-flex {
    display: flex;
    flex-direction: var(--flex-direction);
    justify-content: var(--justify-content);
    align-items: var(--align-items);
    flex-wrap: var(--flex-wrap);
  }
  
  &.layout-masonry {
    columns: var(--grid-columns);
    column-gap: var(--gap, 8px);
  }

  // 网格背景
  .grid-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  // 布局项目
  .layout-item {
    position: relative;
    cursor: default;
    transition: all 0.2s ease;
    border-radius: 4px;
    
    // 内容容器
    .layout-item-content {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
    }
    
    // 选择状态
    &.selected {
      z-index: 1000 !important;
      
      .selection-indicator {
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border: 2px solid #1890ff;
        border-radius: 4px;
        pointer-events: none;
        z-index: 1001;
        
        &::after {
          content: '';
          position: absolute;
          top: -4px;
          left: -4px;
          right: -4px;
          bottom: -4px;
          border: 1px solid rgba(24, 144, 255, 0.3);
          border-radius: 6px;
        }
      }
    }
    
    // 拖拽状态
    &.dragging {
      opacity: 0.8;
      transform: scale(1.02);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      z-index: 1002 !important;
    }
    
    // 锁定状态
    &.locked {
      cursor: not-allowed;
      
      &::after {
        content: '🔒';
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 2px 4px;
        border-radius: 2px;
        z-index: 10;
      }
    }
    
    // 调整大小控制点
    .resize-handle {
      position: absolute;
      background: #1890ff;
      border: 1px solid white;
      border-radius: 2px;
      width: 8px;
      height: 8px;
      z-index: 1002;
      
      &.resize-handle-nw {
        top: -4px;
        left: -4px;
        cursor: nw-resize;
      }
      
      &.resize-handle-ne {
        top: -4px;
        right: -4px;
        cursor: ne-resize;
      }
      
      &.resize-handle-sw {
        bottom: -4px;
        left: -4px;
        cursor: sw-resize;
      }
      
      &.resize-handle-se {
        bottom: -4px;
        right: -4px;
        cursor: se-resize;
      }
      
      &:hover {
        background: #40a9ff;
        transform: scale(1.2);
      }
    }
  }

  // 可拖拽模式
  &.draggable {
    .layout-item {
      cursor: move;
      
      &:hover {
        outline: 1px dashed rgba(24, 144, 255, 0.5);
        outline-offset: 2px;
      }
    }
  }

  // 可放置模式
  &.droppable {
    transition: all 0.3s ease;
    
    &::after {
      content: '拖拽组件到这里';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: rgba(255, 255, 255, 0.3);
      font-size: 18px;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    &:empty::after {
      opacity: 1;
    }
    
    &.drag-over {
      background-color: rgba(24, 144, 255, 0.1);
      border: 2px dashed #1890ff;
      transform: scale(1.01);
      
      &::after {
        content: '松开鼠标放置组件';
        color: #1890ff;
        opacity: 1;
        font-weight: 500;
        text-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
      }
    }
  }

  // 拖拽指示器
  .drop-indicator {
    animation: dropPulse 1s ease-in-out infinite;
  }

  // 拖拽提示
  .drop-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(24, 144, 255, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    z-index: 1001;
    animation: slideUp 0.3s ease-out;
    
    span {
      display: inline-block;
      animation: textGlow 2s ease-in-out infinite;
    }
  }

  // 显示网格模式
  &.show-grid {
    background-image: 
      linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
  }

  // 调试信息
  .debug-info {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    z-index: 1000;
    pointer-events: none;
    
    span {
      margin-right: 8px;
      
      &:last-child {
        margin-right: 0;
      }
    }
  }

  // 示例组件样式
  .demo-component {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }
  }

  // 主题样式
  &.dark {
    background-color: rgba(0, 0, 0, 0.1);
    
    .layout-item {
      &.selected .selection-indicator {
        border-color: #40a9ff;
        
        &::after {
          border-color: rgba(64, 169, 255, 0.3);
        }
      }
    }
    
    .debug-info {
      background: rgba(0, 0, 0, 0.9);
    }
  }
  
  &.light {
    background-color: rgba(255, 255, 255, 0.1);
    
    .layout-item {
      &.selected .selection-indicator {
        border-color: #1890ff;
      }
    }
    
    .debug-info {
      background: rgba(255, 255, 255, 0.9);
      color: #333;
    }
    
    .demo-component {
      background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    }
  }

  // 响应式布局
  &.responsive {
    @media (max-width: 768px) {
      padding: 8px !important;
      
      &.layout-grid {
        grid-template-columns: 1fr !important;
      }
      
      &.layout-flex {
        flex-direction: column !important;
      }
      
      .layout-item {
        min-width: auto !important;
        
        .resize-handle {
          width: 12px;
          height: 12px;
        }
      }
      
      .debug-info {
        font-size: 10px;
        padding: 2px 4px;
      }
    }
    
    @media (max-width: 480px) {
      .layout-item {
        .selection-indicator {
          border-width: 1px;
        }
        
        .resize-handle {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  // 动画效果
  &.layout-grid,
  &.layout-flex {
    .layout-item {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  // 特殊布局效果
  &.layout-masonry {
    .layout-item {
      break-inside: avoid;
      margin-bottom: var(--gap, 8px);
      display: inline-block;
      width: 100%;
    }
  }

  // 悬停效果
  &:hover {
    .layout-item {
      &:not(.selected):not(.dragging) {
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  // 选择区域
  .selection-area {
    position: absolute;
    border: 1px dashed #1890ff;
    background: rgba(24, 144, 255, 0.1);
    pointer-events: none;
    z-index: 999;
  }

  // 拖拽提示线
  .drag-guide-line {
    position: absolute;
    background: #1890ff;
    pointer-events: none;
    z-index: 998;
    
    &.horizontal {
      height: 1px;
      left: 0;
      right: 0;
    }
    
    &.vertical {
      width: 1px;
      top: 0;
      bottom: 0;
    }
  }

  // 焦点管理
  &:focus {
    outline: 2px solid #1890ff;
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .layout-item {
      &.selected .selection-indicator {
        border-width: 3px;
        border-color: #000;
      }
      
      .resize-handle {
        border-width: 2px;
        border-color: #000;
      }
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      animation: none !important;
      transform: none !important;
    }
  }

  // 加载状态
  &.loading {
    opacity: 0.7;
    pointer-events: none;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 32px;
      height: 32px;
      margin: -16px 0 0 -16px;
      border: 3px solid rgba(24, 144, 255, 0.3);
      border-top-color: #1890ff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 1003;
    }
  }

  // 错误状态
  &.error {
    border: 2px solid #ff4d4f;
    background-color: rgba(255, 77, 79, 0.1);
    
    &::after {
      content: '布局错误';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ff4d4f;
      font-size: 16px;
      font-weight: 500;
      z-index: 1003;
    }
  }

  // 空状态
  &.empty {
    &::after {
      content: '暂无布局项目';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      z-index: 1;
    }
  }

  // 动画关键帧
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  @keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
      transform: translateY(0);
    }
    40%, 43% {
      transform: translateY(-8px);
    }
    70% {
      transform: translateY(-4px);
    }
    90% {
      transform: translateY(-2px);
    }
  }

  @keyframes dropPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.7;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateX(-50%) translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
  }

  @keyframes textGlow {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.3);
    }
  }

  // 性能优化
  .layout-item {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  // 打印样式
  @media print {
    .selection-indicator,
    .resize-handle,
    .debug-info {
      display: none !important;
    }
    
    .layout-item {
      break-inside: avoid;
    }
  }
} 